<template>
    <div>
        <div class="title">
            周末去哪

            </div>
     <div>
     <ul >
         <li class="itemContent border-bottom" v-for="(item,index) of list" :key="index">
             <div class="image-wapper">
             <img :src="item.imgUrl"/>
             </div>
               
             <div class="content">
                 <p class="itemTitle">{{item.title}} </p>
                 <p class="des">{{item.desc}}</p>
                 <span class="price">￥100起</span>
             </div>
         </li>
     </ul>
            </div>
    </div>
</template>

<script>
export default {
    name:'HomeWeekend',
    data(){
        return{
          
        }
    },
    props:{
        list:Array
    }
}
</script>

<style lang="stylus" scoped>
@impotr '~styles/mixins.styl'
@import '~styles/varibles.styl'
.title{
    height :40px;
    line-height 40px;
    background-color: #eee;
    padding-left 12px;
}
.itemContent{

    overflow: hidden
    // display flex;
    // height :120px;


}
.image-wapper{
  overflow: hidden
  height 0;
  padding-bottom 30%
  margin 12px 12px 6px 12px;



}
.image-wapper img {

  
    width 100%;
    // height 66px;
}
.content{
 
   flex 1; 
   padding: .1rem
//    padding-top  12px;
}
.itemTitle{
    font-size 15px;
    line-height 15px
    color $darkTextColor

}
.des{
    font-size 15px;
    line-height 15px
    color #ccc
    margin-top 6px
}
.price{
    display block
    margin-top 12px;
    color  #ff9300
}




// .item-img-wrapper
//     overflow: hidden
//     height: 0
//     padding-bottom: 37.09%
    // .item-img
    //   width: 100%
//   .item-info
//     padding: .1rem
//     .item-title
//       line-height: .54rem
//       font-size: .32rem
//       ellipsis()
//     .item-desc
//       line-height: .4rem
//       color: #ccc
//       ellipsis()
</style>